<template>
<div>
  <div style='margin-top: 30px;'><h3><center>Login</center></h3></div>
  <div class='login-box col-md-offset-4 col-md-4'>
    <form class='form-horizontal login-form'>
      <div class='form-group'>
        <label for='username' class='col-sm-3 control-label'>Username:</label>
        <div class='col-sm-9'>
          <input type='text' class='form-control' placeholder='Input username...' v-model='username' />
        </div>
      </div>
      <div class='form-group'>
        <label for='password' class='col-sm-3 control-label'>Password:</label>
        <div class='col-sm-9'>
          <input type='password' class='form-control' placeholder='Input password...' v-model='password' />
        </div>
      </div>
      <div class='col-sm-offset-3 col-sm-9'>
        <center>
          <button @click='login()' type='default' class='btn btn-default' style='width: 80%;'>Login</button>
        </center>
      </div>
    </form>
  </div>
</div>
</template>

<script>
import config from '../config'
export default {
  route: {
    data: function (transition) {
      document.title = 'Login - ' + config.title
    }
  },
  methods: {
    login () {
      this.$http.post(config.apiPath + '/user/auth', {
        username: this.$get('username'),
        password: this.$get('password')
      }, {
        emulateJSON: true,
        credentials: true
      }).then((response) => {
        if (response.data.status === 'success') {
          setTimeout(() => {
            this.$root.$set('user', response.data.data)
            this.$router.go('/home')
          }, 100)
        }
      }, (response) => {
        console.log(response)
      })
    }
  },
  data () {
    return {
      username: '',
      password: ''
    }
  }
}
</script>

<style>
.login-box {
  margin-top: 20px;
}
</style>
